<template>
  <div class="device-info-card">
    <!-- 设备基本信息 -->
    <div class="info-section">
      <div class="section-header">
        <i class="el-icon-mobile-phone"></i>
        <span>设备信息</span>
        <el-button 
          v-if="editable" 
          type="text" 
          size="mini" 
          @click="handleEdit"
          style="margin-left: auto;"
        >
          <i class="el-icon-edit"></i> 编辑
        </el-button>
      </div>
      <div class="info-grid">
        <div class="info-item">
          <span class="label">IMEI:</span>
          <span class="value">{{ deviceInfo.imei || '-' }}</span>
        </div>

        <div class="info-item">
          <span class="label">SIM卡号:</span>
          <span class="value">{{ deviceInfo.simNumber || '-' }}</span>
        </div>
        <div class="info-item">
          <span class="label">创建时间:</span>
          <span class="value">{{ formatTime(deviceInfo.createTime) }}</span>
        </div>
        <div class="info-item">
          <span class="label">备注:</span>
          <span class="value">{{ deviceInfo.remark || '-' }}</span>
        </div>
      </div>
    </div>

    <!-- 状态信息 -->
    <div class="info-section">
      <div class="section-header">
        <i class="el-icon-data-line"></i>
        <span>状态信息</span>
      </div>
      <div class="status-grid">
        <!-- 设备状态 -->
        <div class="status-item">
          <div class="status-label">设备状态</div>
          <div class="status-value">
            <el-tag 
              :type="getDeviceStatusType(deviceInfo.deviceStatus)"
              size="small"
            >
              {{ getDeviceStatusText(deviceInfo.deviceStatus) }}
            </el-tag>
          </div>
        </div>

        <!-- 在线状态 -->
        <div class="status-item">
          <div class="status-label">在线状态</div>
          <div class="status-value">
            <el-tag 
              :type="getOnlineStatusType(deviceInfo.onlineStatus)"
              size="small"
            >
              <i :class="getOnlineStatusIcon(deviceInfo.onlineStatus)"></i>
              {{ getOnlineStatusText(deviceInfo.onlineStatus) }}
            </el-tag>
          </div>
        </div>

        <!-- 使用状态 -->
        <div class="status-item">
          <div class="status-label">使用状态</div>
          <div class="status-value">
            <el-tag 
              :type="getUsageStatusType(deviceInfo.usageStatus)"
              size="small"
            >
              {{ getUsageStatusText(deviceInfo.usageStatus) }}
            </el-tag>
          </div>
        </div>

        <!-- 电池电量 -->
        <div class="status-item">
          <div class="status-label">电池电量</div>
          <div class="status-value">
            <div class="battery-info">
              <el-progress 
                :percentage="deviceInfo.batteryLevel || 0"
                :color="getBatteryColor(deviceInfo.batteryLevel)"
                :stroke-width="8"
                :show-text="false"
                style="width: 80px;"
              ></el-progress>
              <span class="battery-text">{{ deviceInfo.batteryLevel || 0 }}%</span>
            </div>
          </div>
        </div>

        <!-- 信号强度 -->
        <div class="status-item">
          <div class="status-label">信号强度</div>
          <div class="status-value">
            <div class="signal-info">
              <div class="signal-bars">
                <div 
                  v-for="i in 4" 
                  :key="i"
                  class="signal-bar"
                  :class="{ active: i <= getSignalBars(deviceInfo.signalStrength) }"
                ></div>
              </div>
              <span class="signal-text">{{ deviceInfo.signalStrength || 0 }}dBm</span>
            </div>
          </div>
        </div>

        <!-- 最后上报时间 -->
        <div class="status-item">
          <div class="status-label">最后上报</div>
          <div class="status-value">
            <span class="time-text">{{ formatTime(deviceInfo.lastReportTime) }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 位置信息 -->
    <div class="info-section" v-if="deviceInfo.currentLocation">
      <div class="section-header">
        <i class="el-icon-location"></i>
        <span>位置信息</span>
        <el-button 
          type="text" 
          size="mini" 
          @click="handleViewMap"
          style="margin-left: auto;"
        >
          <i class="el-icon-view"></i> 查看地图
        </el-button>
      </div>
      <div class="location-info">
        <div class="location-item">
          <span class="label">经度:</span>
          <span class="value">{{ deviceInfo.currentLocation.longitude }}</span>
        </div>
        <div class="location-item">
          <span class="label">纬度:</span>
          <span class="value">{{ deviceInfo.currentLocation.latitude }}</span>
        </div>
        <div class="location-item full-width">
          <span class="label">地址:</span>
          <span class="value">{{ deviceInfo.currentLocation.address || '解析中...' }}</span>
        </div>
        <div class="location-item">
          <span class="label">定位时间:</span>
          <span class="value">{{ formatTime(deviceInfo.currentLocation.locationTime) }}</span>
        </div>
        <div class="location-item">
          <span class="label">定位精度:</span>
          <span class="value">{{ deviceInfo.currentLocation.accuracy }}米</span>
        </div>
      </div>
    </div>

    <!-- 运单绑定信息 -->
    <div class="info-section" v-if="deviceInfo.boundWaybill">
      <div class="section-header">
        <i class="el-icon-document"></i>
        <span>运单绑定</span>
        <el-button 
          v-if="unbindable" 
          type="text" 
          size="mini" 
          @click="handleUnbind"
          style="margin-left: auto; color: #f56c6c;"
        >
          <i class="el-icon-close"></i> 解绑
        </el-button>
      </div>
      <div class="waybill-info">
        <div class="waybill-item">
          <span class="label">运单号:</span>
          <span class="value">
            <el-link type="primary" @click="handleViewWaybill">
              {{ deviceInfo.boundWaybill.waybillNo }}
            </el-link>
          </span>
        </div>
        <div class="waybill-item">
          <span class="label">发货人:</span>
          <span class="value">{{ deviceInfo.boundWaybill.senderName }}</span>
        </div>
        <div class="waybill-item">
          <span class="label">收货人:</span>
          <span class="value">{{ deviceInfo.boundWaybill.receiverName }}</span>
        </div>
        <div class="waybill-item">
          <span class="label">绑定时间:</span>
          <span class="value">{{ formatTime(deviceInfo.boundWaybill.bindTime) }}</span>
        </div>
        <div class="waybill-item">
          <span class="label">运单状态:</span>
          <span class="value">
            <el-tag size="mini" :type="getWaybillStatusType(deviceInfo.boundWaybill.status)">
              {{ getWaybillStatusText(deviceInfo.boundWaybill.status) }}
            </el-tag>
          </span>
        </div>
      </div>
    </div>

    <!-- 统计信息 -->
    <div class="info-section" v-if="showStatistics">
      <div class="section-header">
        <i class="el-icon-pie-chart"></i>
        <span>统计信息</span>
      </div>
      <div class="statistics-grid">
        <div class="stat-item">
          <div class="stat-value">{{ deviceInfo.totalDistance || 0 }}</div>
          <div class="stat-label">总里程(km)</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ deviceInfo.totalOnlineTime || 0 }}</div>
          <div class="stat-label">在线时长(h)</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ deviceInfo.totalReports || 0 }}</div>
          <div class="stat-label">上报次数</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ deviceInfo.totalAlarms || 0 }}</div>
          <div class="stat-label">告警次数</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DeviceInfoCard',
  props: {
    // 设备信息
    deviceInfo: {
      type: Object,
      required: true,
      default: () => ({})
    },
    // 是否可编辑
    editable: {
      type: Boolean,
      default: false
    },
    // 是否可解绑
    unbindable: {
      type: Boolean,
      default: false
    },
    // 是否显示统计信息
    showStatistics: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    /** 处理编辑 */
    handleEdit() {
      this.$emit('edit', this.deviceInfo);
    },

    /** 处理解绑 */
    handleUnbind() {
      this.$emit('unbind', this.deviceInfo);
    },

    /** 查看地图 */
    handleViewMap() {
      this.$emit('view-map', this.deviceInfo.currentLocation);
    },

    /** 查看运单 */
    handleViewWaybill() {
      this.$emit('view-waybill', this.deviceInfo.boundWaybill);
    },

    /** 获取设备状态类型 */
    getDeviceStatusType(status) {
      const statusMap = {
        '1': 'success', // 正常
        '2': 'warning', // 故障
        '3': 'danger',  // 停用
        '0': 'info'     // 未知
      };
      return statusMap[status] || 'info';
    },

    /** 获取设备状态文本 */
    getDeviceStatusText(status) {
      const statusMap = {
        '1': '正常',
        '2': '故障',
        '3': '停用',
        '0': '未知'
      };
      return statusMap[status] || '未知';
    },

    /** 获取在线状态类型 */
    getOnlineStatusType(status) {
      const statusMap = {
        '1': 'success', // 在线
        '0': 'danger'   // 离线
      };
      return statusMap[status] || 'danger';
    },

    /** 获取在线状态图标 */
    getOnlineStatusIcon(status) {
      const iconMap = {
        '1': 'el-icon-success', // 在线
        '0': 'el-icon-error'    // 离线
      };
      return iconMap[status] || 'el-icon-error';
    },

    /** 获取在线状态文本 */
    getOnlineStatusText(status) {
      const statusMap = {
        '1': '在线',
        '0': '离线'
      };
      return statusMap[status] || '离线';
    },

    /** 获取使用状态类型 */
    getUsageStatusType(status) {
      const statusMap = {
        '1': 'success', // 使用中
        '0': 'info'     // 空闲
      };
      return statusMap[status] || 'info';
    },

    /** 获取使用状态文本 */
    getUsageStatusText(status) {
      const statusMap = {
        '1': '使用中',
        '0': '空闲'
      };
      return statusMap[status] || '空闲';
    },

    /** 获取运单状态类型 */
    getWaybillStatusType(status) {
      const statusMap = {
        '1': 'info',     // 待发货
        '2': 'warning',  // 运输中
        '3': 'success',  // 已送达
        '4': 'danger'    // 异常
      };
      return statusMap[status] || 'info';
    },

    /** 获取运单状态文本 */
    getWaybillStatusText(status) {
      const statusMap = {
        '1': '待发货',
        '2': '运输中',
        '3': '已送达',
        '4': '异常'
      };
      return statusMap[status] || '待发货';
    },

    /** 获取电池颜色 */
    getBatteryColor(level) {
      if (level >= 60) return '#67c23a';
      if (level >= 30) return '#e6a23c';
      return '#f56c6c';
    },

    /** 获取信号格数 */
    getSignalBars(strength) {
      if (!strength) return 0;
      const absStrength = Math.abs(strength);
      if (absStrength <= 70) return 4;
      if (absStrength <= 85) return 3;
      if (absStrength <= 100) return 2;
      return 1;
    },

    /** 格式化时间 */
    formatTime(time) {
      if (!time) return '-';
      const date = new Date(time);
      return date.toLocaleString();
    }
  }
};
</script>

<style scoped>
.device-info-card {
  background: white;
  border-radius: 4px;
  overflow: hidden;
}

.info-section {
  border-bottom: 1px solid #ebeef5;
}

.info-section:last-child {
  border-bottom: none;
}

.section-header {
  display: flex;
  align-items: center;
  padding: 15px 20px 10px;
  font-weight: bold;
  color: #303133;
  background-color: #fafafa;
  border-bottom: 1px solid #ebeef5;
}

.section-header i {
  margin-right: 8px;
  color: #409eff;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  padding: 20px;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-item .label {
  font-weight: bold;
  color: #606266;
  width: 80px;
  flex-shrink: 0;
}

.info-item .value {
  color: #303133;
  flex: 1;
  word-break: break-all;
}

.status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px;
}

.status-item {
  text-align: center;
}

.status-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 8px;
}

.status-value {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.battery-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.battery-text {
  font-size: 12px;
  color: #606266;
  min-width: 35px;
}

.signal-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.signal-bars {
  display: flex;
  align-items: end;
  gap: 2px;
  height: 16px;
}

.signal-bar {
  width: 3px;
  background-color: #dcdfe6;
  border-radius: 1px;
}

.signal-bar:nth-child(1) { height: 4px; }
.signal-bar:nth-child(2) { height: 8px; }
.signal-bar:nth-child(3) { height: 12px; }
.signal-bar:nth-child(4) { height: 16px; }

.signal-bar.active {
  background-color: #67c23a;
}

.signal-text {
  font-size: 12px;
  color: #606266;
}

.time-text {
  font-size: 12px;
  color: #606266;
}

.location-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  padding: 20px;
}

.location-item {
  display: flex;
  align-items: center;
}

.location-item.full-width {
  grid-column: 1 / -1;
}

.location-item .label {
  font-weight: bold;
  color: #606266;
  width: 80px;
  flex-shrink: 0;
}

.location-item .value {
  color: #303133;
  flex: 1;
  word-break: break-all;
}

.waybill-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  padding: 20px;
}

.waybill-item {
  display: flex;
  align-items: center;
}

.waybill-item .label {
  font-weight: bold;
  color: #606266;
  width: 80px;
  flex-shrink: 0;
}

.waybill-item .value {
  color: #303133;
  flex: 1;
}

.statistics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 20px;
}

.stat-item {
  text-align: center;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  color: #909399;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .info-grid,
  .status-grid,
  .location-info,
  .waybill-info {
    grid-template-columns: 1fr;
  }
  
  .statistics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .info-item .label,
  .location-item .label,
  .waybill-item .label {
    width: 60px;
  }
}

@media (max-width: 480px) {
  .statistics-grid {
    grid-template-columns: 1fr;
  }
  
  .section-header {
    padding: 10px 15px 8px;
    font-size: 14px;
  }
  
  .info-grid,
  .status-grid,
  .location-info,
  .waybill-info {
    padding: 15px;
    gap: 10px;
  }
}
</style>